<template>
  <div class="h-panel">
    <div class="h-panel-bar">
      <Button color="primary" @click="add">新增</Button>
      <Space :width="10" />
      <Button @click="locadData">刷新</Button>
    </div>
    <div class="h-panel-body bottom-line">
      <Table :datas="datas">
        <TableItem title="流程名称" prop="name" :width="200" />
        <TableItem title="流程类型" prop="flowType" :width="200" :render="(data) => { return this.render(data, 'flowType') }" />
        <TableItem title="流程状态" prop="flowState" :width="200"
          :render="(data) => { return this.render(data, 'flowState') }" />
        <TableItem title="流程描述" prop="remark" />
        <TableItem title="操作" :width="200" fixed="right">
          <template #default="{ data }">
            <span class="link" @click="design(data)">设计</span>
            <Space :width="10" />
            <span class="link" @click="edit(data)">编辑</span>
            <Space :width="10" />
            <span class="link" @click="remove(data)">删除</span>
          </template>
        </TableItem>
      </Table>
    </div>
    <div class="h-panel-bar">
      <Pagination :page="page" :total="page.total" @change="locadData" />
    </div>

    <Modal v-model="editOpend" :closeOnMask="false" :hasCloseIcon="false" :hasDivider="true" :draggable="true">
      <template #header>定义流程</template>
      <Form ref="form" :model="formModel">
        <FormItem label="流程名称" prop="name" style="width:800px">
          <Input type="text" v-model="formModel.name" />
        </FormItem>
        <FormItem label="流程类型" prop="flowType">
          <Select v-model="formModel.flowType" :datas="flowTypeData"></Select>
        </FormItem>
        <FormItem label="是否共享" prop="isOpen">
          <Radio v-model="formModel.isOpen" :datas="isOpenData"></Radio>
        </FormItem>
        <FormItem label="流程状态" prop="flowState" single>
          <Select v-model="formModel.flowState" :datas="flowStateData"></Select>
        </FormItem>
        <FormItem label="流程描述" prop="remark">
          <Textarea type="text" v-model="formModel.remark" rows="8"></Textarea>
        </FormItem>
      </Form>
      <template #footer>
        <Button @click="editOpend = false">关闭</Button>
        <Space :width="10" />
        <Button color="blue" @click="saveOrUpdate">确认</Button>
      </template>
    </Modal>

  </div>
</template>

<script>
import { confirm, message } from 'heyui';

export default {
  mounted() {
    this.locadData();
  },
  created() {
  },
  data() {
    return {
      isOpenData: [{ "value": "1", "label": "是" }, { "value": "0", "label": "否" }],
      flowStateData: [{ value: "1", label: '启用' }, { value: "0", label: '停用' }],
      flowTypeData: [{ value: "1", label: '默认类型' }],
      page: {
        page: 1,
        size: 10,
        total: 0
      },
      formModel: {
        flowState: "1",
        flowType: "1",
      },
      editOpend: false,
      datas: [],
    };
  },
  methods: {
    design(data) {
      this.$router.push({
        path: "/flow/design",
        query: {
          id: data.id,
        },
      });
    },
    render(data, key) {
      switch (key) {
        case "flowState":
          return this.flowStateData.find(item => item.value == data.flowState).label;
        case "flowType":
          return this.flowTypeData.find(item => item.value == data.flowType).label;
        default:
          return data[key];
      }
    },
    locadData() {
      this.$post("/fwconfig/page", {
        page: { current: this.page.page, size: this.page.size },
      }).then(res => {
        if (res.data == null) {
          this.page.total = 0;
          return;
        }
        if (res.data.code != this.$success && res.msg != null) {
          message.error(res.msg);
          return;
        }
        if (!!res.data.data) {
          if (res.data.data.rows != null) {
            this.datas = res.data.data.rows;
          } else {
            this.datas = [];
          }
          this.page.total = res.data.data.total;
          return;
        } else {
          this.datas = [];
          this.page.total = 0;
        }
      });
    },
    saveOrUpdate() {
      if (!!this.formModel.id) {
        this.edit()
      } else {
        this.add();
      }
    },
    add() {
      if (!this.editOpend) {
        this.formModel = {};
        this.editOpend = true;
        return;
      }
      this.$post("/fwconfig", this.formModel).then(res => {
        if (res.data.code == this.$success) {
          this.editOpend = false;
          this.formModel = {};
          this.locadData();
        }
      });
    },
    edit(data) {
      if (!this.editOpend) {
        this.formModel = data;
        this.editOpend = true;
        return;
      }
      this.$put("/fwconfig/edit", this.formModel).then(res => {
        if (res.data.code == this.$success) {
          this.editOpend = false;
          this.formModel = {};
          this.locadData();
        }
      });
    },
    remove(data) {
      confirm({
        content: '确定删除？',
        onConfirm: () => {
          this.$delete("/fwconfig/" + data.id).then(res => {
            if (res.data.code == this.$success) {
              this.locadData();
            }
          });
        }
      });
    }
  },
};
</script>